import { defineStore } from 'pinia'
import { setItem, getItem } from '@/libs/utils/storage'
import { DEFAULT_COLOR, DEFAULT_NAME, DEFAULT_LAYOUT, DEFAULT_LAYOUT_VALUE, DEFAULT_ROUTE_TAG, DEFAULT_ROUTE_TAG_VALUE, DEFAULT_MENU_COLOR, DEFAULT_MENU_COLOR_VALUE, DEFAULT_BREAD, DEFAULT_DEFAULT_BREAD_VALUE } from '@/libs/utils/constant'

interface ThemeStore {
  defaultColor: string //主题色
  defaultLayout: string //布局设设置 'longitudinal' || 'transverse'
  showRouteTag: boolean
  menuColor: string // 'dark' 'light'
  showBreadRoute: boolean
}

export const useThemeStore = defineStore({
  id: 'useThemeStore',
  state: (): ThemeStore => ({
    defaultColor: getItem(DEFAULT_COLOR) || DEFAULT_NAME,
    defaultLayout: getItem(DEFAULT_LAYOUT) || DEFAULT_LAYOUT_VALUE,
    showRouteTag: getItem(DEFAULT_ROUTE_TAG) || DEFAULT_ROUTE_TAG_VALUE,
    menuColor: getItem(DEFAULT_MENU_COLOR) || DEFAULT_MENU_COLOR_VALUE,
    showBreadRoute: getItem(DEFAULT_BREAD) || DEFAULT_DEFAULT_BREAD_VALUE
  }),
  actions: {
    setDefaultColor(newData: string) {
      this.defaultColor = newData
      setItem(DEFAULT_COLOR, newData)
    },
    setDefaultLayout(newData: string) {
      this.defaultLayout = newData
      setItem(DEFAULT_LAYOUT, newData)
    },
    setShowRouteTag(newData: boolean) {
      this.showRouteTag = newData
      setItem(DEFAULT_ROUTE_TAG, newData)
    },
    setMenuColor(newData: string) {
      this.menuColor = newData
      setItem(DEFAULT_MENU_COLOR, newData)
    },
    setShowBreadRoute(newData: boolean) {
      this.showBreadRoute = newData
      setItem(DEFAULT_BREAD, newData)
    }
  },
  getters: {
    hasDefaultColor(state) {
      return state.defaultColor
    },
    hasDefaultLayout(state) {
      return state.defaultLayout
    },
    hasShowRouteTag(state) {
      return state.showRouteTag
    },
    hasMenuColor(state) {
      return state.menuColor
    },
    hasShowBreadRoute(state) {
      return state.showBreadRoute
    }
  }
})
